import React, { Fragment, useRef, useEffect, CSSProperties } from 'react'
import { Row, Col } from 'antd'
import { IMeta, IConfig, IData } from '../../../../dnd/component_type'
import * as echarts from 'echarts'
import { articleApi } from '../../../../../api'

interface IProps {
  meta: IMeta,
  config: IConfig,
  data: IData,
  children?: any;
}

export default function ArticleChartPreview (props: IProps) {
  const { config, data, meta } = props
  const articleCountRef: any = useRef()

  const contentStyle: CSSProperties = {
    height: config.style.height,
    lineHeight: config.style.height,
    width: config.style.width,
    textAlign: 'center',
    color: '#fff',
    background: '#364d79',
  };

  useEffect(() => {
    getMonthlyCount()
  }, [config.attr.title, config.attr.boundaryGap, config.attr.type])

  // 每月文章的数量
  const getMonthlyCount = () => {
    let articleCountChart = echarts.init(articleCountRef.current)

    articleApi.getMonthlyCount().then((res: any) => {
      // console.log('getMonthlyCount', res)
      var option = {
        title: {
          text: config.attr.title
        },
        xAxis: {
          type: 'category',
          boundaryGap: config.attr.boundaryGap,
          data: res.data.pv.map((item: any) => {
            return item.month
          })
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: res.data.pv.map((item: any) => {
            return item.value
          }),
          type: config.attr.type,
          smooth: true
        }]
      };

      articleCountChart.setOption(option);
    })
  }

  return (
    <Fragment>
      <Row gutter={16}>
        <Col span={24} >
          <div style={ config.style } ref={ articleCountRef } />
        </Col>
      </Row>
    </Fragment>
  )
}